<template>
    <div class="tab-container">
        <el-tabs style='margin-top:15px;' v-model="activeName">
            <el-tab-pane :label="$t('ApprReport.apprGroup')" name="first">
                <appr-group v-if="activeName === 'first'"></appr-group>
            </el-tab-pane>
            <el-tab-pane :label="$t('ApprReport.apprUser')" name="second">
                <appr-user v-if="activeName === 'second'"></appr-user>
            </el-tab-pane>
            <el-tab-pane :label="$t('ApprReport.apprTotal')" name="third">
                <appr-total v-if="activeName === 'third'"></appr-total>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    export default {
      data() {
        return {
          activeName: 'first'
        }
      },
      components: {
        'appr-group': () => import('./components/apprGroup'),
        'appr-user': () => import('./components/apprUser'),
        'appr-total': () => import('./components/apprTotal')
      }
    }
</script>

<style scoped>
.tab-container {
  margin: 30px 15px;
}
</style>